import React from "react";
import Bgs from "../../css/zh/icon/bgs.svg?react";
import "../../css/zh/ydy3.css";
import { useNavigate } from "react-router-dom";
const Ydy3 = () => {
  const navigate = useNavigate();
  return (
    <div className="ydy3" style={{ textAlign: "center" }}>
      <Bgs
        style={{ width: "360px", height: "340px", margin: "100px auto" }}
      ></Bgs>
      <h1 style={{ width: "260px", margin: "0 auto", fontSize: "36px" }}>
        让我们把您的家变得焕然一新
      </h1>
      <ul
        style={{
          display: "flex",
          margin: "60px 0px",
          paddingRight: "20px",
          justifyContent: "center",
          listStyle: "none",
          alignItems: "center",
        }}
      >
        <li
          style={{
            width: "8px",
            height: "8px",
            background: "#ccc",
            borderRadius: "15px",
            margin: "5px",
          }}
        ></li>
        <li
          style={{
            width: "8px",
            height: "8px",
            background: "#ccc",
            borderRadius: "15px",
            margin: "5px",
          }}
        ></li>
        <li
          style={{
            width: "32px",
            height: "8px",
            background: "#7210FF",
            borderRadius: "15px",
            margin: "5px",
          }}
        ></li>
      </ul>
      <div class="container-button">
        <div class="hover bt-1"></div>
        <div class="hover bt-2"></div>
        <div class="hover bt-3"></div>
        <div class="hover bt-4"></div>
        <div class="hover bt-5"></div>
        <div class="hover bt-6"></div>
        <button
          onClick={() => {
            navigate("/zh");
          }}
        ></button>
      </div>
    </div>
  );
};
export default Ydy3;
